<template>
  <div class="cart_item_container">
    <div class="cart_item_info_left">
      <div class="cart_item_check">
        <input type="checkbox" :checked="item.checked"
        @click="onClickCheck"/>
      </div>
      <div class="cart_item_imgae">
        <img :src="item.mainPic"/>
      </div>
      <div class="cart_item_title">{{item.dtitle}}</div>
    </div>
    <div class="cart_item_info_right">
      <div>{{item.actualPrice}}</div>
      <div>
        <el-input-number :value="item.count" size="mini"
        @change="onChangeCount"></el-input-number>
      </div>
      <div>小计</div>
      <div>
        <el-button type="danger" icon="el-icon-delete" circle
        @click="onClickDelete"></el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    item:Object
  },
  methods:{
    onClickCheck(event){
      var checked = event.target.checked;
      this.$store.commit("cartModule/CHANGE_STORE_CHECKED",{
        id:this.item.id,
        checked:checked
      })
    },
    onChangeCount(currentValue, oldValue){
      console.log(currentValue,oldValue);
      this.$store.commit("cartModule/CHANGE_ITEM_COUNT",{
        id:this.item.id,
        count:currentValue
      })
    },
    onClickDelete(){
      this.$store.commit("cartModule/DELETE_ITEM",this.item.id);
    }
  }
}
</script>

<style scoped>
.cart_item_container
{
  width: 90%;
  height: 70px;
  border: 1px solid blue;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.cart_item_info_left
{
  width: 50%;
  height: 100%;
  display: inline-flex;
  justify-content:flex-start;
  align-items: center;
  border: 1px solid red;
}

.cart_item_info_right
{
  width: 50%;
  height: 100%;
  border: 1px solid blue;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.cart_item_info_right div
{
  flex: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.cart_item_check,.cart_item_imgae
{
  flex: 1;
  height: 100%;
  border: 1px solid yellow;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.cart_item_imgae  img
{
  width: 60px;
}

.cart_item_title
{
  flex:3;
  height: 100%;
  border: 1px solid  pink;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}
</style>